import {useState} from "react";
import {apiLogin, apiRegister} from "@/common/apis/user";
import {Button, message} from "antd";
import {setUserInfo} from "@/common/util";
import UserInfoStore from "@/common/store/UserInfoStore";

function SwitchForm(props: { close: any }) {

  console.log('-------SwitchForm-------')

  const [param, setParam] = useState<any>({user_name: '', password: '', rePassword: '', nick_name: ''})

  const [formType, setFormType] = useState(0) // 0-登录表单  1-注册表单
  const [errorNick, setErrNick] = useState('')
  const [errorAcct, setErrAcct] = useState('')
  const [errorAuth, setErrAuth] = useState('')
  const [errorReau, setErrReau] = useState('')

  const onSubmit = async () => {
    const checkedResult = checkSubmitParam()
    if (checkedResult !== "OK") {
      message.error(checkedResult)
      return
    }
    if (formType === 0) {
      const res = await apiLogin(param)
      if (res.code === 0) {
        setUserInfo(res.data)
        UserInfoStore.reloadUserInfo()
        props.close()
        message.success("登录成功", 2)
      }
    } else if (formType === 1) {
      const res = await apiRegister(param)
      if (res.code === 0) {
        message.success("注册成功，请登录")
        reSetForm(0)
      }
    }
  }

  function reSetForm(type: number) {
    setParam({user_name: '', password: '', rePassword: '', nick_name: ''})
    setErrNick('')
    setErrAcct('')
    setErrAuth('')
    setErrReau('')
    setFormType(type)
  }

  function checkSubmitParam() {
    if (!param.user_name || param.user_name.length < 3) return "账号不能少于3个字符"
    if (!param.password || param.password.length < 6) return "密码不能少于6个字符"
    if (formType == 1) {
      if (!param.nick_name || param.nick_name.length < 3) return "用户名不能少于3个字符"
      if (!param.rePassword || param.rePassword !== param.password) return "两次输入的密码不一致"
    }
    return "OK"
  }

  function changeNickName(nick_name: string) {
    setParam({...param, nick_name})
    setErrNick('')
    if (nick_name.length < 3) {
      setErrNick('用户名不能少于3个字符')
    }
  }

  function changeAccount(user_name: string) {
    setParam({...param, user_name})
    setErrAcct('')
    if (user_name.length < 3) {
      setErrAcct('账号不能少于3个字符')
    }
  }

  function changePassword(password: string) {
    setParam({...param, password})
    setErrAuth('')
    if (password.length < 6) {
      setErrAuth('密码不能少于6个字符')
    }
  }

  function changeRePassword(rePassword: string) {
    setParam({...param, rePassword})
    setErrReau('')
    if (param.password !== rePassword) {
      setErrReau('两次输入的密码不一致')
    }
  }

  return (
    <form className='default-login'>
      {/* 昵称输入框 */}
      {formType === 1 ?
        <div className='input-unit'>
          <div className='input-box'>
            <input
              defaultValue={param.nick_name}
              type='text' placeholder='输入昵称'
              style={{
                borderColor: errorNick ? '#F4606C' : '',
                color: errorNick ? '#F4606C' : ''
              }}
              onChange={(e) => {
                changeNickName(e.target.value)
              }}
            />
          </div>
          <p className='error-text' style={{height: errorNick ? '2em' : '0px'}}>{errorNick}</p>
        </div> : ''
      }

      {/* 账号输入框 */}
      <div className='input-unit'>
        <div className='input-box'>
          <input
            value={param.user_name}
            type='text' placeholder="用户名"
            style={{
              borderColor: errorAcct ? '#F4606C' : '',
              color: errorAcct ? '#F4606C' : ''
            }}
            onChange={(e) => {
              changeAccount(e.target.value)
            }}
          />
        </div>
        <p className='error-text' style={{height: errorAcct ? '2em' : '0px'}}>{errorAcct}</p>
      </div>

      {/* 密码输入框 */}
      <div className='input-unit'>
        <div className='input-box'>
          <input
            value={param.password}
            type='password' placeholder="密码"
            style={{
              borderColor: errorAuth ? '#F4606C' : '',
              color: errorAuth ? '#F4606C' : ''
            }}
            onChange={(e) => {
              changePassword(e.target.value)
            }}
          />
        </div>
        <p className='error-text' style={{height: errorAuth ? '2em' : '0px'}}>{errorAuth}</p>
      </div>

      {/* 确认密码输入框 */}
      {formType === 1 ?
        <div className='input-unit'>
          <div className='input-box'>
            <input
              defaultValue={param.rePassword}
              type='password' placeholder='确认密码'
              style={{
                borderColor: errorReau ? '#F4606C' : '',
                color: errorReau ? '#F4606C' : ''
              }}
              onChange={(e) => {
                changeRePassword(e.target.value)
              }}
            />
          </div>
          <p className='error-text' style={{height: errorReau ? '2em' : '0px'}}>{errorReau}</p>
        </div> : ''
      }

      <div className='input-unit'>
        <div className='input-box'>
          <Button onClick={onSubmit}>{formType === 1 ? '注册' : '登录'}</Button>
        </div>
      </div>

      <div className='input-unit'>
        <span>登录遇到问题？</span>
        <span
          onClick={() => {
            reSetForm(formType === 0 ? 1 : 0)
          }}>
          {formType === 0 ? "立即注册" : "立即登录"}
        </span>
      </div>

      <div className='input-unit'>
        <span>使用社交账号登录：</span>
        <span className='icon-box'>{icon.qq}</span>
        <span className='icon-box'>{icon.weibo}</span>
        <span className='icon-box'>{icon.baidu}</span>
        <span className='icon-box'>{icon.github}</span>
      </div>
    </form>
  )
}

export default SwitchForm

const icon = {
  qq: <svg className='icon' viewBox='0 0 1024 1024' version='1.1' xmlns='http://www.w3.org/2000/svg'>
    <path
      d='M512 1024a512 512 0 1 1 512-512 512.597333 512.597333 0 0 1-512 512zM512 19.712A492.288 492.288 0 1 0 1004.288 512 492.828444 492.828444 0 0 0 512 19.712z'
      fill='#369BCE'/>
    <path
      d='M811.150222 606.748444l-1.564444-11.178666-1.962667-10.922667-1.564444-5.688889-1.507556-5.944889-2.019555-5.688889-2.076445-6.286222-2.360889-5.973333-2.56-6.144-4.608-9.984-4.039111-8.817778-4.067555-7.850667-3.527112-7.367111-4.096-6.684444-2.844444-6.144-6.343111-9.159111-7.964445-12.174222-2.048-2.872889-0.597333-1.28v-1.080889l1.308445-4.124445 1.848888-3.669333 1.621334-7.224889 0.881778-3.754667v-3.868444l0.455111-3.100444V446.577778l-0.455111-3.584-0.540445-2.844445-1.166222-5.944889-1.536-5.688888-1.507556-5.432889-2.161777-5.148445-2.503112-4.295111-1.735111-4.039111-2.133333-3.84-3.384889-5.688889-1.251555-2.019555-0.369778-1.763556-1.564445-10.979556-0.995555-7.224888-1.166222-8.988445-1.792-9.244444-2.844445-10.609778-1.564444-5.973333-1.28-5.034667-1.735111-5.888-1.962667-6.229333-1.934222-5.688889-2.503111-6.200889-5.091556-12.003556-2.844444-5.688889-3.669334-6.513777-3.498666-5.575112-3.384889-6.314666-4.835556-5.888-4.067555-5.688889-4.949334-5.888-5.091555-5.319111-5.12-5.148445-6.030223-5.319111-3.185777-1.934222-3.015111-2.673778-6.513778-4.693333-7.594667-5.176889-7.708444-4.551111-7.936-3.982222-8.732445-3.783111-8.163555-3.584-8.533334-3.100445-9.272889-2.588444-8.533333-2.275556-9.102222-2.019555-8.533333-2.104889-9.187556-0.995556-9.045333-1.109333L550.741333 199.111111h-27.022222l-9.187555 0.512-8.533334 1.194667-8.533333 1.137778-8.704 1.450666-8.533333 1.649778-8.362667 2.076444-8.163556 2.673778-7.566222 2.645334-7.566222 2.56-7.623111 3.754666-7.168 3.100445-6.371556 3.669333-6.627555 4.124444-6.115556 4.295112-6.030222 4.864-4.977778 4.494222-7.793778 7.424-6.513777 6.883555-6.172445 6.684445-5.688889 6.798222-5.347555 6.968889-4.664889 6.798222-4.522667 6.769778-2.104889 3.015111-1.962666 3.669333-4.238223 6.428445-3.356444 6.428444-3.015111 6.030222-2.616889 6.428445-2.56 5.859555-2.133333 5.489778-1.934223 5.888-1.962666 5.404445-2.645334 9.813333-1.934222 9.415111-1.080889 7.879111-1.080889 6.798222v13.198223l-1.820444 1.991111-1.706667 2.844444-1.308444 2.474667-1.137778 2.673778-1.422222 5.688889-1.564445 5.290666-0.540444 4.778667-0.369778 3.470222v3.754667l-3.640889 5.347555-2.56 5.319111-1.962666 5.12-1.422223 4.579556-1.109333 4.408889-1.109333 3.982222v10.524445l0.625777 2.56 0.910223 4.664888 1.137777 3.555556-2.048 1.564444-5.688888 4.295112-7.537778 6.940444-4.608 4.124444-4.494222 4.039112-3.128889 3.214222-2.56 2.844444-5.489778 5.944889-5.233778 5.944889-4.067555 5.12-4.892445 7.424-4.693333 6.684444-4.579556 7.424-3.896889 6.883556-3.242666 7.310222-3.441778 6.769778-2.474667 6.684444-2.645333 6.997334-1.991111 6.769778-1.905778 6.940444-1.735111 6.087111-0.881778 6.599111-1.052444 6.058667-0.881778 5.888-0.540445 11.377778v15.416889l0.568889 4.664888 1.450667 7.964445 0.483556 3.470222 0.967111 3.555556 1.166222 3.413333 1.080889 2.389333 1.735111 4.408889 1.336889 0.881778 0.796444 1.848889 1.024 0.426667h1.080889l4.551111-0.398223 4.608-1.223111 3.896889-1.536 4.067556-2.673778 3.697777-2.474666 3.384889-3.242667 3.555556-3.328 3.100444-3.498667 2.844445-3.953777 2.673778-3.584 2.503111-2.844445 1.564444-3.413333 3.043556-5.688889 0.938666-2.275556 0.540445-1.365333 0.284444-1.564444 0.711111-1.28 0.540445-0.256 1.052444-0.512h0.625778l0.284444 0.540444h0.483556l0.512 0.312889 1.706667 7.566222 1.848889 6.172445 2.474666 6.4 2.474667 5.688889 2.104889 5.688888 3.242666 5.034667 2.360889 5.319111 2.673778 4.864 3.072 4.181334 2.332445 4.067555 6.172444 7.480889 5.432889 6.712889 5.205333 5.233778 5.148445 4.664889 4.437333 3.612444 6.627556 5.973333 2.673777 1.336889 0.881778 1.28v0.654222l-0.654222 0.540445h-0.256l-1.336889 0.455111-4.949333 0.369778-4.636445 0.625778-3.896889 0.568888-4.067555 0.938667-3.555556 1.080889-3.527111 1.109333-3.100444 1.678223-2.474667 1.479111-3.100444 1.024-1.905778 1.649777-2.104889 1.28-2.247111 1.877334-2.844445 3.555555-0.938666 1.706667-1.308445 1.450667-1.792 3.726222-0.995555 3.128889-1.166223 3.128889-0.256 2.844444v5.148445l-0.512 2.531555v2.588445l-0.625777 2.56v2.275555l0.625777 2.474667 0.512 2.218666 1.422223 4.323556 0.995555 1.991111 1.251556 2.019556 1.393778 1.991111 1.507555 1.763555 2.019556 1.991111 1.507555 1.678223 4.522667 3.384889 4.522667 2.844444 5.205333 2.56 5.688889 2.275556 5.916444 2.446222 6.570667 1.564444 6.570667 2.190222 7.111111 1.479112 7.111111 1.109333 7.253333 1.109333 7.537778 1.080889 14.819555 1.564445 15.331556 0.284444h27.079111l6.627556-0.284444 5.688889-0.654223 5.489777-0.483555 5.12-0.455111 8.248889-1.621334 5.944889-1.678222 5.688889-1.450667 10.439111-4.352 4.721778-1.877333 4.522667-2.275555 7.424-4.209778 6.741333-3.413334 4.949333-3.214222 3.640889-3.384889 5.688889 0.654223 4.408889 0.455111 8.704 0.654222h7.509333l2.673778 0.568889 2.702222 1.080889 4.238222 1.592889 4.750223 1.621333 9.045333 2.844444 9.244444 3.413334 8.988445 2.616889 9.073778 1.848888 9.272889 2.389334 9.585777 1.336889 9.102223 1.052444 9.159111 1.251556 8.533333 0.796444 9.130667 0.540445h25.315555l8.192-1.024 7.992889-0.369778 7.68-1.308445 7.082667-1.592889 7.054222-1.564444 6.855111-1.649778 2.844445-0.824889 3.100444-1.024 5.944889-2.360889 5.233778-2.446222 4.949333-2.56 4.608-2.673778 4.039111-3.072 1.649778-1.649777 1.962667-2.275556 2.417777-3.015111 2.844445-3.783111 0.967111-1.905778 0.455111-1.592889 1.137778-1.962666 0.426666-2.275556v-2.076444l0.568889-2.104889-0.568889-3.128889-0.426666-2.645334-1.137778-3.100444-0.853333-2.56-1.763556-3.128889-1.991111-2.844444-1.934222-2.503111-2.673778-2.076445-5.432889-4.778667-6.087111-4.551111-6.144-3.697777-6.485333-3.726223-14.762667-7.338666-3.527111-2.190223-0.967111-1.024-0.568889-0.654222 7.082667-7.253333 3.072-3.584 2.56-3.328 5.006222-7.253333 4.664889-7.395556 3.982222-6.570667 3.783111-6.343111 5.006222-12.629333 3.896889-10.524445 2.616889-7.424 1.450667-2.474666 0.938666-2.019556 1.592889-1.166222h0.625778l0.483556 0.369778 3.783111 7.594666 3.413333 7.338667 2.360889 4.096 2.474667 3.584 2.446222 4.408889 3.157333 4.295111 2.673778 3.015111 1.592889 1.621334 1.564444 1.479111 1.450667 1.109333 1.393778 0.995556 3.015111 1.536 1.592889 0.568888h2.446222l1.621333-0.568888 1.962667-0.995556 2.247111-0.938667 1.792-1.649777 1.735111-1.905778 1.934222-2.389334 1.507556-1.848888 1.735111-2.844445 1.308444-2.417778 1.507556-3.384889 0.796444-2.844444 2.218667-6.940444 1.422222-7.708445 1.024-8.533333 0.711111-4.949334v-13.909333z'
      fill='#369BCE'/>
  </svg>,
  weibo: <svg className='icon' viewBox='0 0 1024 1024' version='1.1' xmlns='http://www.w3.org/2000/svg'>
    <path
      d='M512 22.755556C782.791111 22.755556 1001.244444 241.208889 1001.244444 512S782.791111 1001.244444 512 1001.244444 22.755556 782.791111 22.755556 512 241.208889 22.755556 512 22.755556m0-22.755556C229.831111 0 0 229.831111 0 512S229.831111 1024 512 1024 1024 794.168889 1024 512 794.168889 0 512 0z'
      fill='#EC3902'/>
    <path
      d='M448.284444 684.942222c4.551111-6.826667 6.826667-15.928889 4.551112-25.031111-2.275556-9.102222-9.102222-15.928889-15.928889-20.48-18.204444-6.826667-38.684444 0-50.062223 18.204445-4.551111 6.826667-6.826667 15.928889-4.551111 25.031111 2.275556 9.102222 6.826667 15.928889 15.928889 20.48 18.204444 6.826667 40.96 0 50.062222-18.204445z m34.133334-47.786666c2.275556-2.275556 2.275556-6.826667 2.275555-9.102223 0-2.275556-2.275556-6.826667-6.826666-6.826666-6.826667-2.275556-13.653333 0-18.204445 6.826666-2.275556 2.275556-2.275556 6.826667-2.275555 9.102223 0 2.275556 2.275556 6.826667 6.826666 6.826666 6.826667 4.551111 15.928889 0 18.204445-6.826666z m65.991111 43.235555c-25.031111 54.613333-84.195556 79.644444-141.084445 61.44-25.031111-6.826667-43.235556-25.031111-54.613333-47.786667-9.102222-22.755556-9.102222-50.062222 2.275556-72.817777 25.031111-47.786667 79.644444-75.093333 134.257777-61.44 25.031111 6.826667 47.786667 22.755556 59.164445 45.511111 9.102222 22.755556 9.102222 50.062222 0 75.093333z m113.777778-63.715555c-6.826667-75.093333-102.4-127.431111-211.626667-116.053334-109.226667 11.377778-191.146667 81.92-184.32 157.013334 6.826667 75.093333 102.4 127.431111 211.626667 116.053333 109.226667-11.377778 191.146667-81.92 184.32-157.013333z m113.777777 2.275555c0 86.471111-120.604444 195.697778-298.097777 195.697778-136.533333 0-277.617778-70.542222-277.617778-184.32 6.826667-75.093333 43.235556-143.36 97.848889-193.422222 84.195556-86.471111 179.768889-127.431111 216.177778-88.746667 15.928889 22.755556 20.48 54.613333 6.826666 81.92-4.551111 18.204444 15.928889 6.826667 15.928889 9.102222 65.991111-29.582222 125.155556-31.857778 147.911111 0 11.377778 20.48 11.377778 47.786667 0 68.266667-4.551111 13.653333 2.275556 13.653333 11.377778 18.204444 45.511111 9.102222 77.368889 47.786667 79.644444 93.297778z m-27.306666-241.208889c20.48 25.031111 27.306667 56.888889 18.204444 86.471111-2.275556 6.826667-9.102222 13.653333-15.928889 15.928889-6.826667 2.275556-15.928889 0-20.48-6.826666-4.551111-6.826667-6.826667-13.653333-4.551111-22.755556 4.551111-15.928889 2.275556-31.857778-9.102222-43.235556-9.102222-11.377778-25.031111-15.928889-38.684444-13.653333-6.826667 2.275556-11.377778 0-15.928889-2.275555-4.551111-2.275556-9.102222-9.102222-9.102223-13.653334-2.275556-6.826667 0-11.377778 2.275556-18.204444 2.275556-4.551111 6.826667-9.102222 13.653333-9.102222 29.582222-6.826667 59.164444 4.551111 79.644445 27.306666z m68.266666-63.715555c40.96 50.062222 56.888889 118.328889 36.408889 179.768889-2.275556 6.826667-6.826667 11.377778-11.377777 15.928888-6.826667 2.275556-13.653333 4.551111-20.48 2.275556-13.653333-4.551111-20.48-20.48-15.928889-34.133333 13.653333-43.235556 4.551111-93.297778-25.031111-127.431111s-75.093333-50.062222-118.328889-40.96c-6.826667 2.275556-13.653333 0-20.48-4.551112-4.551111-4.551111-9.102222-9.102222-11.377778-15.928888-2.275556-13.653333 4.551111-27.306667 20.48-31.857778 59.164444-13.653333 125.155556 9.102222 166.115555 56.888889z m0 0'
      fill='#EC3902'/>
  </svg>,
  baidu: <svg className='icon' viewBox='0 0 1024 1024' version='1.1' xmlns='http://www.w3.org/2000/svg'>
    <path
      d='M729.6 315.52c-14.72 0-28.16 3.84-40.32 10.88 5.12-13.44 7.68-28.8 7.68-44.16 0-62.72-43.52-113.92-97.28-113.92-46.72 0-85.76 38.4-94.72 90.24-8.96-51.2-46.72-90.24-90.88-90.24-52.48 0-94.08 51.2-94.08 113.92 0 17.92 3.84 34.56 9.6 49.92-14.08-10.88-30.08-17.28-48-17.28-51.84 0-93.44 51.2-93.44 113.92S230.4 543.36 281.6 543.36s93.44-51.2 93.44-113.92c0-17.92-3.84-35.2-10.24-49.92 14.08 10.24 30.08 16.64 47.36 16.64 44.8 0 81.92-38.4 90.88-90.24 9.6 51.2 48.64 90.24 94.72 90.24 14.72 0 28.16-3.84 40.32-10.88-3.2 13.44-5.76 28.16-5.76 44.16 0 62.72 43.52 113.92 97.28 113.92s97.28-51.2 97.28-113.92-43.52-113.92-97.28-113.92z m-448 176.64c-23.04 0-42.88-28.8-42.88-62.72s19.2-62.72 42.88-62.72 42.24 28.8 42.24 62.72-19.2 62.72-42.24 62.72z m131.84-147.84c-23.04 0-42.24-28.8-42.24-62.08s19.2-62.72 42.24-62.72 42.24 28.8 42.24 62.72-19.84 62.08-42.24 62.08z m186.24 0c-24.96 0-46.08-28.8-46.08-62.72s21.12-62.72 46.08-62.72 46.08 28.8 46.08 62.72-21.76 62.72-46.08 62.72z m129.92 147.2c-24.96 0-46.08-28.8-46.08-62.72s21.12-62.72 46.08-62.72c24.96 0 46.08 28.8 46.08 62.72s-21.12 62.72-46.08 62.72zM362.88 654.72c0 21.76 17.92 39.68 39.68 39.68h40.32V615.04h-40.32c-21.76 0-39.68 17.92-39.68 39.68z'
      fill='#3245DF'/>
    <path
      d='M622.72 497.28C566.4 430.72 544 408.32 505.6 407.68c-39.04-0.64-67.84 24.96-100.48 67.2s-81.92 83.2-81.92 83.2c-90.88 67.2-83.2 141.44-47.36 197.76 35.84 56.32 147.2 30.72 162.56 26.24 14.72-4.48 70.4-14.72 112.64-7.04 42.24 7.68 106.88 32.64 160.64 0 73.6-44.16 54.4-138.24 34.56-162.56-24.96-29.44-67.2-48.64-123.52-115.2zM481.28 577.28v160.64H401.92a80.704 80.704 0 0 1 0-161.28h38.4v-70.4h40.96v71.04z m179.84 156.16H556.16a37.12 37.12 0 0 1-37.12-37.12v-121.6h40.96v113.28c0 2.56 1.92 5.76 5.76 5.76h53.76V575.36h40.96v158.08z'
      fill='#3245DF'/>
    <path
      d='M512 0C230.4 0 0 230.4 0 512s230.4 512 512 512 512-230.4 512-512-230.4-512-512-512z m0 1013.76C235.52 1013.76 10.24 783.36 10.24 512S235.52 10.24 512 10.24s501.76 230.4 501.76 501.76-225.28 501.76-501.76 501.76z'
      fill='#3245DF'/>
  </svg>,
  github: <svg className='icon' viewBox='0 0 1024 1024' version='1.1' xmlns='http://www.w3.org/2000/svg'>
    <path
      d='M512 12.64c-282.752 0-512 229.216-512 512 0 226.208 146.72 418.144 350.144 485.824 25.6 4.736 35.008-11.104 35.008-24.64 0-12.192-0.48-52.544-0.704-95.328-142.464 30.976-172.512-60.416-172.512-60.416-23.296-59.168-56.832-74.912-56.832-74.912-46.464-31.776 3.52-31.136 3.52-31.136 51.392 3.616 78.464 52.768 78.464 52.768 45.664 78.272 119.776 55.648 148.992 42.56 4.576-33.088 17.856-55.68 32.512-68.48-113.728-12.928-233.28-56.864-233.28-253.024 0-55.904 20-101.568 52.768-137.44-5.312-12.896-22.848-64.96 4.96-135.488 0 0 43.008-13.76 140.832 52.48a491.296 491.296 0 0 1 128.16-17.248c43.488 0.192 87.328 5.888 128.256 17.248 97.728-66.24 140.64-52.48 140.64-52.48 27.872 70.528 10.336 122.592 5.024 135.488 32.832 35.84 52.704 81.536 52.704 137.44 0 196.64-119.776 239.936-233.792 252.64 18.368 15.904 34.72 47.04 34.72 94.816 0 68.512-0.608 123.648-0.608 140.512 0 13.632 9.216 29.6 35.168 24.576C877.472 942.624 1024 750.784 1024 524.64c0-282.784-229.248-512-512-512z'
      fill=''/>
  </svg>
}
